<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表渲染</title>
	<link rel="icon" href="../logo.png">
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
</head>
<body>
	<p class="title">1.v-for</p>
	<p class="subtitle">1.1基本用法</p>
	<ul id="example">
		<li v-for="(item,index) in items">
			{{parentMsg}}
			{{index}}
			{{item.message}}
		</li>
		<p>除了可以用in也可以用of</p>
		<li v-for="(item,index) of items">
			{{parentMsg}}
			{{index}}
			{{item.message}}
		</li>

		<p class="subtitle">1.2 template v-for</p>
		<template v-for="item of items">
			<li>{{item.message}}</li>
		</template>



		<p class="subtitle">1.3对象迭代v-for</p>
		<li v-for="(value,key,index) in object">{{index}} - {{key}}: <span>{{value}}</span> </li>
	</ul>
	<script>
		var app = new Vue({
			el:'#example',
			data:{
				parentMsg:'parent',
				items:[
					{message:'Foo'},
					{message:'Bar'},
				],
				object:{
					firstName:'shen',
					lastName:'zhiyong',
					age:30,
				}
			}
		})
	</script>

	<div id="example2">
		<span v-for="n in 10">{{n}}</span>
	</div>

	<script>
		var app2 = new Vue({
			el:'#example2',
		})
	</script>

	<p class="subtitle">组件和v-for</p>
	<ul id="example3">
		<my-component v-for="(item,index) in items" v-bind:item="item" v-bind:index="index"></my-component>
	</ul>
	<script>
		Vue.component('my-component',{
			props:['item','index'],
			template:'<li>{{index}}-{{item}}</li>'
		})

		var app3=new Vue({
			el:'#example3',
			data:{
				items:[
					{text:'Learning Javascript'},
					{text:'Learning Vue'},
					{text:'Build something awesome'},
				]
			}
		})
	</script>

	<p class="subtitle">todo list demo</p>
	<div id="todoDemo">
		<input type="text" v-model="newMsg" v-on:keyup.enter="add" placeholder="input">
		<ul>
			<todo-item v-for="(item,index) in itemList" v-bind:item="item" v-bind:index="index" v-on:remove="itemList.splice(index, 1)" v-on:click="remove1"></todo-item>
			<!-- <li is="todo-item" v-for:"(todo,index) in items" v-bind:items="todo" v-on:remove="todos.splice(index, 1)"></li> -->
		</ul>
	</div>

	<script>
		Vue.component('todo-item',{
			props:['item','index'],
			template:'\
				<li>	{{item}} \
					<button  v-on:click="$emit(\'remove\')">X</button> \
				</li>',
		})
		var app4 = new Vue({
			el:'#todoDemo',
			data:{
				newMsg:'',
				itemList:[
					'Do the dishes',
		      'Take out the trash',
		      'Mow the lawn'
				]
			},
			methods:{
				add:function() {
					this.itemList.push(this.newMsg);
					this.newMsg='';
				},
				remove1:function () {
					alert(1);
					// this.itemList.splice(index,1);
				}
			}
		})
	</script>

	<p class="subtitle">key</p>

	
	<p class="title">数组更新检测</p>
	<ul id="example4">
		<input type="text" v-model="search" v-on:keyup="filter(search)">
		<my-component v-for="(item,index) in items" v-bind:item="item" v-bind:index="index"></my-component>
	</ul>
	<script>
		Vue.component('my-component',{
			props:['item','index'],
			template:'<li>{{item}}</li>'
		})
		var app5=new Vue({
			el:'#example4',
			data:{
				search:'',
				items:[
					'Learning Javascript',
					'Learning Vue',
					'Build something awesome',
				]
			},
			methods:{
				filter:function(search){
						console.log(search);
					app5.items = app5.items.filter(function(ele,search){
						console.log(search);
						return (ele == 'Learning Javascript');
					})
				}
			}
		})
	</script>

	<p class="title">显示过滤/排序结果</p>
	<div id="example6">
		<li v-for="n in evenNumbers">{{n}}</li>
	</div>
	<script>
		var app6= new Vue({
			el:'#example6',
			data:{
				numbers:[1,2,3,4,5,6,7]
			},
			computed:{
				evenNumbers:function(){
					return this.numbers.filter(function(number){
						return number %2 ===0;
					})
				}
			}
		})
	</script>
	<hr>
	<div id="example7">
		<li v-for="n in even(numbers)">{{n}}</li>
	</div>
	<script>
		var app7= new Vue({
			el:'#example7',
			data:{
				numbers:[1,2,3,4,5,6,7]
			},
			methods:{
				even:function(){
					return this.numbers.filter(function(number){
						return number %2 !==0;
					})
				}
			}
		})
	</script>
</body>
</html>